<template>
  <el-dialog
    append-to-body
    title="店铺详情"
    :visible.sync="dialogVisible"
    align="left"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    top="20px"
    width="1000px">
    <div id="shop-detail-dialog" v-if="dialogVisible">
      <div class="nav-buttons">
        <div class="button" v-for="(item,index) in typeArr" :key="index" v-text="item.name"
             :class="{curr:showType===item.key}" @click="changeShowType(item.key)"></div>
        <div class="c"></div>

        <div v-if="showType==='adminList'" class="button created-user" @click="openCreate">创建管理员</div>
        <!--        <div class="button">信息总览</div>-->
        <!--        <div class="button">管理员</div>-->
      </div>

      <div class="chart-box" v-if="showType==='overInfo'">
        <template v-for="(item,index) in echartArr">
          <my-chart :title="item.name" v-if="item.dataList.length>0" :data-list="item.dataList"/>
        </template>
<!--        <my-chart title="资金" :data-list="moneyDataList"/>-->
<!--        <my-chart title="商品" :data-list="productDataList"/>-->
      </div>

      <div class="shop-table" v-show="showType==='baseInfo'">
        <div class="item-1">
          <div class="title">店铺名称:</div>
          <div class="value" v-text="shop.name"></div>
          <div class="title">店铺地址:</div>
          <div class="value">
            <span v-text="shop.addressDetail?shop.addressDetail:'-'" class="ovd_s"
                  style="width: 200px; height: 25px; display: inline-block;"></span>
          </div>
          <div class="c"></div>
        </div>

        <div class="item-1">
          <div class="title">店铺logo:</div>
          <div class="value">
            <el-image
              style="width: 25px; height: 25px"
              :src="shop.logo"
              :preview-src-list="[shop.logo]">
            </el-image>
          </div>
          <div class="title">店铺banner:</div>
          <div class="value">
            <el-image
              style="width: 50px; height: 25px"
              v-for="(item,index) in shop.bannerArr"
              :key="index"
              :src="item"
              :preview-src-list="shop.bannerArr">
            </el-image>
            <span v-if="shop.bannerArr.length===0">暂无信息</span>
          </div>
          <div class="c"></div>
        </div>

        <div class="item-1">
          <div class="title">营业时间:</div>
          <div class="value" v-text="shop.businessTime.join(',')"></div>
          <div class="title">营业状态:</div>
          <div class="value">
            <span v-text="shop.businessStatus.name"></span>
            <span v-if="shop.businessStatus.id===2" v-text="'('+shop.businessStopInfo+')'"></span>
          </div>
          <div class="c"></div>
        </div>


        <div class="item-1">
          <div class="title">是否同城配送:</div>
          <div class="value">
            <span v-text="shop.isSameCitySend?'是':'否'"></span>
          </div>
          <div class="title">配送费:</div>
          <div class="value">
            <span v-text="shop.expressPrice"></span>
          </div>
          <div class="c"></div>
        </div>

        <div class="item-1">
          <div class="title">满免配送费:</div>
          <div class="value" v-text="shop.freeExpressPrice"></div>
          <div class="title">店铺满减:</div>
          <div class="value">
            <span class="full-minus-price-item" v-for="(item,index) in shop.fullMinusPrice" :key="index"
                  style="margin: 5px">{{ '满' + item.full + ',减' + item.minus }}</span>
          </div>
          <div class="c"></div>
        </div>

        <div class="item-1">
          <div class="title">经营范围:</div>
          <div class="value">
            <span class="full-minus-price-item" v-for="(item,index) in shop.classifyName" :key="index"
                  style="margin: 5px">{{ item }}</span>
          </div>
          <div class="title">店员数量:</div>
          <div class="value">
            <span v-text="shop.clerkNums"></span>
          </div>
          <div class="c"></div>
        </div>

        <div class="item-1">
          <div class="title">商品数量:</div>
          <div class="value" v-text="shop.productNums"></div>
          <div class="title">被收藏数量:</div>
          <div class="value">
            <span v-text="shop.collectNums"></span>
          </div>
          <div class="c"></div>
        </div>

        <div class="item-1">
          <div class="title">店铺评分:</div>
          <div class="value" v-text="shop.score"></div>
          <div class="title">物流评分:</div>
          <div class="value">
            <span v-text="shop.expressScore"></span>
          </div>
          <div class="c"></div>
        </div>

      </div>

      <sys-user-page :belong-user="belongUser" ref="sysUserPage" v-if="showType==='adminList' && belongUser.id>0" :shop-id="shop.id"/>

      <create-sys-user-dialog ref="createSysUserDialog" :success-function="searchList"/>
    </div>
  </el-dialog>
</template>

<script>
import MyChart from '../Common/MyChart'
import SysUserPage from '../Page/SysUserPage'
import EchartTools from '../Tools/EchartTools'
import CreateSysUserDialog from './CreateSysUserDialog'

export default {
  name: 'ShopDetailDialog',
  components: {CreateSysUserDialog, SysUserPage, MyChart},
  data: function () {
    return {
      showType: 'baseInfo',
      echartAllArr: {},
      echartArr: [
        {
          name: '订单',
          configList: [{key: 'OrderPay', name: '已付款'}, {key: 'OrderComplete', name: '已完成'}, {
            key: 'OrderReturn',
            name: '已退款'
          }],
          dataList: []
        },
        {
          name: '资金',
          configList: [{key: 'Settlement', name: '已结算'}, {key: 'WithDraw', name: '已提现'}],
          dataList: []
        },
        {
          name: '商品',
          configList: [{key: 'ProductUp', name: '上架数量'}, {key: 'ProductDown', name: '下架数量'}],
          dataList: []
        }
      ],
      typeArr: [
        {name: '基本信息', key: 'baseInfo'},
        {name: '信息总览', key: 'overInfo'},
        {name: '管理员列表', key: 'adminList'},
      ],
      dialogVisible: false,
      shop: {
        'id': 0,
        'number': '307000005',
        'name': '博大五金电动工具',
        'logo': 'http://image.yangfankj.com/shop/logo/19.jpg',
        'classifyName': [
          '建材'
        ],
        'bannerArr': [],
        'province': '陕西省',
        'city': '榆林市',
        'cityCode': '0912',
        'county': '榆阳区',
        'address': '三街工商银行对面',
        'addressDetail': '陕西省,榆林市,榆阳区 三街工商银行对面',
        'location': [
          '109.746401',
          '38.296486'
        ],
        'mobile': '0912-8993311',
        'createdTime': '22-07-25 14:05',
        'status': {
          'name': '正常',
          'id': 1
        },
        'isSameCitySend': 1,
        'productNums': 5,
        'collectNums': 0,
        'score': 80,
        'expressScore': 80,
        'businessStatus': {
          'name': '营业中',
          'id': 1
        },
        'businessTime': [
          '09:30',
          '21:00'
        ],
        'expressPrice': 20,
        'freeExpressPrice': 100,
        'fullMinusPrice': [
          {
            'minus': 5,
            'full': 100
          },
          {
            'minus': 25,
            'full': 200
          },
          {
            'minus': 50,
            'full': 300
          },
          {
            'minus': 70,
            'full': 500
          }
        ],
        'businessStopInfo': null,
        'updateStatus': 0
      },
      belongUser:{},
    }
  },
  watch:{
    dialogVisible:function (value) {
      if (!value){
        this.echartArr=[
          {
            name: '订单',
            configList: [{key: 'OrderPay', name: '已付款'}, {key: 'OrderComplete', name: '已完成'}, {
              key: 'OrderReturn',
              name: '已退款'
            }],
            dataList: []
          },
          {
            name: '资金',
            configList: [{key: 'Settlement', name: '已结算'}, {key: 'WithDraw', name: '已提现'}],
            dataList: []
          },
          {
            name: '商品',
            configList: [{key: 'ProductUp', name: '上架数量'}, {key: 'ProductDown', name: '下架数量'}],
            dataList: []
          }
        ]
      }
    }
  },
  mounted () {
    // var demoData1 = EchartTools.parseData(this.echartData.OrderComplete)
  },
  methods: {
    openCreate:function () {
      this.$refs.createSysUserDialog.open({},this.belongUser)
    },
    searchList:function () {
      this.$refs.sysUserPage.searchList()
    },
    getEchartData: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameSystem + 'Shop/getOverData', {type: 'month',shopId:$this.shop.id}, function (data) {
        $this.echartAllMap = data
        $this.showChart('money')
      })
    },
    /**
     * 显示类型: money.金额 count.数量
     * @param showNumberKey
     */
    showChart (showNumberKey) {
      let $this = this
      $this.echartArr.forEach(function (item, index) {
        item.configList.forEach(function (_item, _index) {
          // 压入即将要渲染的数组
          $this.echartArr[index].dataList.push({
            name: _item.name,
            list: EchartTools.parseData($this.echartAllMap[_item.key])[showNumberKey]
          })
        })
      })
    },
    changeShowType: function (type) {
      if (type==='overInfo'){
        this.getEchartData()
      }
      this.showType = type
      this.$forceUpdate()
    },
    open: function (infoData) {
      this.showType = 'baseInfo'
      this.shop = infoData
      this.belongUser={
        userType:'Shop',
        id:this.shop.id,
        name:this.shop.name,
        logo:this.shop.logo,
      }
      this.dialogVisible = true
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped>

</style>
